<template>
  <div class="dashboard">
    <div class="header">
      <div class="time">{{ currentDate }} {{ currentTime }}</div>
      <div class="title">农业大棚可视化大屏</div>
      <div class="logout">
        <button @click="logout">退出登录</button>
      </div>
    </div>
    <div class="dashboard_header">
      <dv-decoration5 :dur="2" class="dv-decoration5" />
    </div>
    <div class="dashboard_content">
      <div class="dc_row_1">
        <div class="dc_info">
          <dv-border-box10 class="dv-border-box10">
            <dv-decoration7 style="width: 100%; height: 30px; padding: 1vw 0;">
              <div style="color: #ffffff; font-size: 1.2vw; padding: 0 1vw; font-weight: bold;">
                大棚信息
              </div>
            </dv-decoration7>
            <div class="info_detail">
              <div class="info-item">
                <div class="info-label">大棚名字</div>
                <div class="info-value">智慧大棚001号</div>
              </div>
              <el-divider border-style="dashed" style="width: 90%"/>
              <div class="info-item">
                <div class="info-label">大棚地址</div>
                <div class="info-value">云南大学呈贡校区</div>
              </div>
              <el-divider border-style="dashed" style="width: 90%"/>
              <div class="info-item">
                <div class="info-label">大棚面积</div>
                <div class="info-value">999.00 m²</div>
              </div>
              <el-divider border-style="dashed" style="width: 90%"/>
              <div class="info-item">
                <div class="info-label">已绑定的设备数</div>
                <div class="info-value">6</div>
              </div>
            </div>
          </dv-border-box10>
        </div>
        <div class="dc_monitor">
          <dv-border-box11>
            <div class="title—content">
              大棚实时监控录像
            </div>
            <div class="monitor_content">
              <!-- 萤石云视频流嵌入 -->
              <img src="../assets/icons/1.png" height="480" width="900"/>
              <div id="monitor-video" style="width: 100%; height: 100%;"></div>
            </div>
          </dv-border-box11>
        </div>
        <div class="dc_weather">
          <dv-border-box10  class="dv-border-box10">
            <dv-decoration7 style="width: 100%; height: 30px; padding: 1vw 0;">
              <div style="color: #ffffff; font-size: 1.2vw; padding: 0 1vw; font-weight: bold;">
                天气预报
              </div>
            </dv-decoration7>
            <div class="weather-content">
              <div class="weather-item" v-for="(item, index) in weatherData" :key="index">
                <div class="weather-date">{{ item.date }}</div>
                <div class="weather-icon">
                  <img :src="item.icon" alt="" />
                </div>
                <div class="weather-temp">{{ item.temp }}°C</div>
                <div class="weather-info">
                  <div>湿度: {{ item.humidity }}%</div>
                  <div>风速: {{ item.wind }} m/s</div>
                </div>
              </div>
            </div>
            <img src="../assets/images/weather_under.png" height="200" width="300"/>
          </dv-border-box10>
        </div>
      </div>
      <div class="dc_row_2">
        <div class="dc_chart">
          <dv-border-box12>
            <h4>土壤含水量</h4>
            <div id="soil-moisture-chart" style="width: 100%; height: 20vh;"></div>
          </dv-border-box12>
        </div>
        <div class="dc_chart">
          <dv-border-box12>
            <h4>二氧化碳含量</h4>
            <div id="co2-chart" style="width: 100%; height: 20vh;"></div>
          </dv-border-box12>
        </div>
        <div class="dc_chart">
          <dv-border-box12>
            <h4>氮磷钾含量</h4>
            <div id="npk-chart" style="width: 100%; height: 20vh;"></div>
          </dv-border-box12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import sunny from '../assets/icons/sunny.png';
import cloudy from '../assets/icons/cloudy.png';
import rainy from '../assets/icons/rainy.png';

export default {
  data() {
    return {
      currentDate: '', // 存储当前日期
      currentTime: '', // 存储当前时间
      weatherData: [
        {
          date: '今天',
          icon: sunny, // 使用本地图标
          temp: '25',
          humidity: '60',
          wind: '3.5',
        },
        {
          date: '明天',
          icon: cloudy, // 使用本地图标
          temp: '22',
          humidity: '70',
          wind: '4.0',
        },
        {
          date: '后天',
          icon: rainy, // 使用本地图标
          temp: '20',
          humidity: '80',
          wind: '5.0',
        },
      ],
      // 写死的传感器数据
      sensorData: [
        { id: '1', name: '土壤含水率', value: 25.5 },
        { id: '2', name: 'CO2', value: 400 },
        { id: '3', name: '土壤氮含量', value: 10 },
        { id: '4', name: '土壤磷含量', value: 5 },
        { id: '5', name: '土壤钾含量', value: 8 },
      ],
    };
  },
  methods: {
    logout() {
      // 清除 token
      localStorage.removeItem('token');
      // 跳转到登录页面
      this.$router.push('/login');
    },
    // 更新日期和时间
    updateDateTime() {
      const now = new Date();
      // 格式化日期
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      this.currentDate = `${year}-${month}-${day}`;
      // 格式化时间
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');
      this.currentTime = `${hours}:${minutes}:${seconds}`;
    },
    // 渲染图表
    renderCharts() {
      // 过滤出土壤含水量数据
      const soilMoistureData = this.sensorData.filter(item => item.name.includes('土壤含水'));
      // 过滤出二氧化碳数据
      const co2Data = this.sensorData.filter(item => item.name.includes('CO2'));
      // 过滤出氮磷钾数据
      const npkData = this.sensorData.filter(item => item.name.includes('氮') || item.name.includes('磷') || item.name.includes('钾'));

      // 土壤含水量柱状图
      const soilMoistureChart = echarts.init(document.getElementById('soil-moisture-chart'));
      soilMoistureChart.setOption({
        // title: { text: '土壤含水量' },
        tooltip: {},
        xAxis: { data: soilMoistureData.map(item => item.name) },
        yAxis: {},
        series: [{
          name: '含水量',
          type: 'bar',
          data: soilMoistureData.map(item => item.value),
        }],
      });

      // 二氧化碳曲线图
      const co2Chart = echarts.init(document.getElementById('co2-chart'));
      co2Chart.setOption({
        // title: { text: '二氧化碳浓度' },
        tooltip: {},
        xAxis: { data: co2Data.map(item => item.name) },
        yAxis: {},
        series: [{
          name: 'CO2',
          type: 'line',
          data: co2Data.map(item => item.value),
        }],
      });

      // 氮磷钾曲线图
      const npkChart = echarts.init(document.getElementById('npk-chart'));
      npkChart.setOption({
        // title: { text: '氮磷钾含量' },
        tooltip: {},
        xAxis: { data: npkData.map(item => item.name) },
        yAxis: {},
        series: [
          { name: '氮', type: 'line', data: npkData.filter(item => item.name.includes('氮')).map(item => item.value) },
          { name: '磷', type: 'line', data: npkData.filter(item => item.name.includes('磷')).map(item => item.value) },
          { name: '钾', type: 'line', data: npkData.filter(item => item.name.includes('钾')).map(item => item.value) },
        ],
      });
    },
  },
  mounted() {
    // 初始化日期和时间
    this.updateDateTime();
    // 每秒更新一次日期和时间
    this.timer = setInterval(this.updateDateTime, 1000);
    // 直接渲染图表
    this.renderCharts();
  },
  beforeUnmount() {
    // 组件销毁时清除定时器
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.dashboard {
  height: 100vh; /* 占满整个屏幕高度 */
  width: 100vw; /* 占满整个屏幕宽度 */
  padding: 20px;
  overflow: hidden; /* 防止内容溢出 */

  background-image: url('../assets/images/background.png'); /* 添加背景图 */
  background-size: cover; /* 背景图覆盖整个页面 */
  background-position: center; /* 背景图居中 */
  background-repeat: no-repeat; /* 背景图不重复 */
}
.dashboard .header {
  display: flex;
  padding-top: 0.5vw;
}
.dashboard .header .time {
  flex: 1;
  float: left;
  font-size: 1.2vw; /* 调整字体大小 */
  font-weight: bold;
  color: #e6e6e6;
  padding-top: 1vw;
}
.dashboard .header .title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2.5rem; /* 大标题 */
  font-weight: bold;
  color: #e6e6e6;
  flex: 5;
}
.dashboard .header .logout {
  margin-left: 10vw;
  padding-top: 0.7vw;
}
.dashboard .header .logout button {
  flex: 1;
  float: right;
  padding: 10px;
  background: #2575fc;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
  height: 2.5vw;
}
button:hover {
  background: #1a5bbf;
}
.dashboard_header {
  width: 100%;
  display: flex;
  justify-content: center;
}
.dashboard_header .dv-decoration5 {
  width: 50vw;
  height: 40px;
  margin-top: -2vw;
}
.dashboard_content {
  width: 100%;
  color: #e6e6e6;
}
.dashboard_content .dc_row_1 {
  width: 100%;
  height: 60vh;
  display: flex;
}
.dashboard_content .dc_row_1 .dc_info {
  flex: 1;
  width: 10vw;
  margin-top: 1.7vw;
  margin-bottom: 0.4vw;
}
.dashboard_content .dc_row_1 .dc_info .info_detail {
  height: 55vh;
  width: 100%;
  padding: 1vw;
  text-align: center;
}
.dashboard_content .dc_row_1 .dc_info .info_detail .info-item {
  width: 90%;
  height: 7vh;
  //display: flex;
  justify-content: center;
  align-content: center;
}
.dashboard_content .dc_row_1 .dc_info .info_detail .info-item .info-label {
  font-size: 1.2vw;
  font-weight: bold;
  padding-bottom: 1vw;
}
.dashboard_content .dc_row_1 .dc_info .info_detail .info-item .info-value {
  font-size: 1vw;
}
@media (max-width: 600px) {
  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-label {
    min-width: auto;
    margin-bottom: 4px;
  }
}
.dashboard_content .dc_row_1 .dc_monitor {
  flex: 3;
  width: 8vw;
  padding: 0 1vw;
}
.dashboard_content .dc_row_1 .dc_monitor .title—content {
  font-size: 1.2vw;
  padding: 1vw 0;
  font-weight: bold;
}
.dashboard_content .dc_row_1 .dc_weather {
  flex: 1;
  width: 10vw;
  margin-top: 1.7vw;
  margin-bottom: 0.4vw;
}
.weather-content {
  display: flex;
  justify-content: space-around;
  margin-top: 1vw;
}
.weather-content .weather-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  font-size: 1vw;
  padding: 1vw;
  //background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.weather-date {
  font-weight: bold;
  margin-bottom: 0.5vw;
}
.weather-icon img {
  width: 3vw;
  height: 3vw;
}
.weather-temp {
  font-size: 1.5vw;
  margin: 0.5vw 0;
}
.weather-info div {
  font-size: 0.8vw;
  margin: 0.2vw 0;
}
.dashboard_content .dc_row_2 {
  width: 100%;
  height: 50%;
  display: flex;
}
.dashboard_content .dc_row_2 .dc_chart {
  width: 100%;
  height: 25vh;
}
.dashboard_content .dc_row_2 .dc_chart h4 {
  font-size: 1vw;
  padding: 1vw;
}
</style>
